<template>
  <div class="reset-box">
    <van-nav-bar
      title="粉丝团"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      class="nav-bar"
      :class="[iosFlag]"
    />
    <!-- <p style="font-size:14px;color:#fff;text-align:center;">玩家查询</p>
    <div class="field-container">
      <van-field style="position:relative"
        class="box-input"
        v-model.lazy="carryid"
        autofocus
        type="text"
        placeholder="请输入玩家ID"
      >
      </van-field>

      <span style="color:#fff;display:block;width: calc(100% - 11px);border-bottom: solid 0.5px #eee;padding:10px auto ;float: right;    text-indent: 5px;height: 40px; line-height: 40px;" class="userName">用户名:{{userName}}</span>

      <span style="color:#fff;display:block;width: calc(100% - 11px);border-bottom: solid 0.5px #eee;padding:10px auto ;float: right;    text-indent: 5px;height: 40px; line-height: 40px;" class="userName">激活日期:{{userCreate_on}}</span>

      <span style="color:#fff;display:block;width: calc(100% - 11px);border-bottom: solid 0.5px #eee;padding:10px auto ;float: right;    text-indent: 5px;height: 40px; line-height: 40px;" class="userName">玩家级别:{{userRating}}</span>

      <van-field class="box-input">
      </van-field>
    </div> -->
    
    <div class="fans-top">
      <p class="fans-top-title">
        粉丝总人数
      </p>
      <p class="fans-count">
        {{ this.dataCount }}
      </p>
    </div>
    <div class="fans-bottom fans-bottom-first">
      <p class="fans-bottom-title">玩家查询</p>
    </div>
    <div class="fans-bottom fans-bottom-first">
      <van-row
            class="mywallet-con-address"
            style="border-radius: 0;">
            <van-col class="data-unit" span="24">
              <van-field style="position:relative"
                class="box-input"
                v-model.lazy="carryid"
                autofocus
                type="text"
                placeholder="请输入玩家ID"
              >
              </van-field>
            </van-col>
            <van-col class="data-unit" span="24">用户名:&nbsp;&nbsp;{{userName}}</van-col>
            <van-col class="data-unit" span="24">激活日期:&nbsp;&nbsp;{{userCreate_on}}</van-col>
            <van-col class="data-unit" span="24">玩家级别:&nbsp;&nbsp;{{userRating}}</van-col>
          </van-row>
    </div>
    <div class="fans-bottom fans-bottom-first">
      <p class="fans-bottom-title">我的粉丝团</p>
    </div>
    <div class="fans-bottom" v-for="(item, index) in fansList"
            :key="index">
      <van-row
            class="mywallet-con-address"
            style="border-radius: 0;"
            
          >
            <van-col class="data-unit" span="24">激活时间:&nbsp;&nbsp;{{item.active_time}}</van-col>
            <van-col class="data-unit" span="24">用户名:&nbsp;&nbsp;{{item.nick_name}}</van-col>
            <van-col class="data-unit" span="24">邀请码:&nbsp;&nbsp;{{item.ref_code}}</van-col>
            <van-col class="data-unit" span="24">粉丝数:&nbsp;&nbsp;{{item.children_count}}</van-col>
          </van-row>
    </div>
  </div>
</template>

<script>
  import { NavBar, Button, Field, Cell, CellGroup, Toast } from 'vant';
  export default {
    components: {
      [NavBar.name]: NavBar,
      [Button.name]: Button,
      [Field.name]: Field,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Toast.name]: Toast,
    },
    data() {
      return {
        activeAmountModel: "",
        carryid: "",
        buttonCanRun: false,
        togglePassword: false,
        pem: "",
        iosFlag:null,
        phoneCode:"",
        loading: false,
        finished: false,
        userphone:"",
        buy_type:'',
        other_user_id:'',
        password:'',
        tradeControl:true,
        lastPageUrl:"",
        userName:"",
        userCreate_on:'',
        userRating:'',
        fansList:[],
        pageIndex: 0,
        dataCount: 0
      }
    },
    watch:{
      carryid(){
        if(/^[0-9]*$/.test(this.carryid)){
          if(6 === this.carryid.length){
            this.$axios({
              method: "GET",
              url: url_g + '/user/ref/'+this.carryid,
              headers: {
                'Authorization': 'Bearer ' + token_g
              }
            }).then((res) => {
              if(res.data && res.data.user){
                this.userName = res.data.user.nick_name;
                this.userCreate_on = res.data.user.created_on;
                switch(res.data.user.rating) {
                  case '1':
                    res.data.user.rating = '有效节点'
                    break;
                  case '2':
                    res.data.user.rating = '重要节点'
                    break;
                  case '3':
                    res.data.user.rating = '超级节点'
                    break;
                  case '4':
                    res.data.user.rating = '全球节点'
                    break;
                }
                this.userRating = res.data.user.rating;
              }else{
                this.userName = "";
                this.userCreate_on = "";
                this.userRating = "";
              }
            }).catch((e)=>{
              Toast(e.response.data.detail);
            })
          }else{
            this.userName = '';
            this.userCreate_on = "";
            this.userRating = "";
          }
        }else{
          this.userName = '';
          this.userCreate_on = "";
          this.userRating = "";
        }
      }
    },
    mounted() {
      this.lastPageUrl = sessionStorage.getItem("lastAndNowPage").split('-')[1];
      sessionStorage.setItem("lastAndNowPage",this.lastPageUrl+"-/fans");
      if(!sessionStorage.getItem("usermessage")) {
        this.$router.push('/login');
      }
        token_g = JSON.parse(sessionStorage.getItem("usermessage")).token;
      this.ismobile(1);
      this.getListData();
    },
    methods: {
      onClickLeft() {
        this.$router.push('/wallet')
      },
      //移动端适配-首页顶部标题栏
      ismobile(test){
        var u = navigator.userAgent, app = navigator.appVersion;
        if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
          if(window.location.href.indexOf("?mobile")<0){
            try{
              if(/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)){
                //this.iosFlag = 'ddisplay';
                document.getElementsByClassName("van-tabbar")[0].style = {};
                document.getElementsByClassName("van-tabbar")[0].style.display = "none";
                this.iosFlag = ' ';
              }else{
                this.iosFlag = ' ';
              }
            }catch(e){
            }
          }
        }else if( u.indexOf('iPad') > -1){
          //this.iosFlag = 'ddisplay';
          document.getElementsByClassName("van-tabbar")[0].style = {};
          document.getElementsByClassName("van-tabbar")[0].style.display = "none";
        }else{
          this.iosFlag = ' ';

        }
      },
      getListData(){
        let params = {}
        if(this.pageIndex != 0) {
          params.page = this.pageIndex + 1
        }
        this.$axios({
          method: 'GET',
          url: url_g + '/user/children/',
          params: params,
          headers: {
            'Authorization': 'Bearer ' + token_g
          }
        }).then((res) => {
          if(res && res.data && 0 < res.data.data.length){
            this.fansList = res.data.data;
            // 所有数据的总数
            this.dataCount = res.data.child_count;
            this.fansList.map(function(item,index){
              for(var key in item){
                if(!item[key]){
                  item[key] = '-'
                }
              }
            })
          }
        }).catch((e) => {
          Toast(e.response.data.detail);
        });
      },
      onLoad() {
        this.pageIndex ++
        this.getListData()
      },
      andOrIos() {
        let u = navigator.userAgent;
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        return isAndroid
      }
    },
    computed: {

    }
  }
</script>

<style scoped="scoped">
.fans-list{
  text-align:center;
  width: 100%;
  margin:0px auto;
  font-size:12px;
   border:1px solid #000;
  border-radius:5px;
  height: auto;
  border-bottom: 1px solid #000;
  justify-content: center;
  line-height:20px;
}
.reset-box {
  height: 100vh;
  background-color: #fff;
  overflow-y:scroll;
}
.login-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 60px;
}
.login-title p {
  color: #fff;
  font-size: 40px;
  margin: 0;
  line-height: 60px;
}
.login-title span {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
}
.box-input {
  color: #000;
  background-color: transparent;
  border:solid 1px #ddd
}
.field-container{
  padding:0 12px;
}
.tip-text{
  display: block;
  /*width:97px;*/
  height:18px;
  font-size:13px;
  font-family:PingFangSC-Regular;
  color:#F10213;
  line-height:18px;
  margin-top: 14px;
}
button {
  display: block;
  width: calc(100% - 24px);
  height: 49px;
  background-color: #025596;
  border: 0;
  border-radius: 4px;
  font-size:15px;
  line-height: 21px;
  color: #fff;
}
button:disabled {
  color: #fff;
  background-color: #81AACB;
}
.ddisplay{
  display: none;
}
.button-save {
  display: block;
  margin: 30px auto;
  width: calc(100% - 24px);
}
.code-btn {
  background-color: transparent;
  font-size: 12px;
  float: right;
  border: 1px solid #fff;
  color: #fff;
}
.active-type{
  margin: 20px 0 0 10px;
  color: #fff;
}
.active-type-one{
  height: 30px;
}
p {
  margin: 0;
}
.fans-top {
  padding: 30px 15px;
  color: #fff;
  background: url('/static/img/game/mine-bg.jpg') no-repeat;
  background-size: cover cover;
  background-attachment: fixed;
}
.fans-top-title {
  margin-bottom: 10px;
  font-size: 14px;
}
.fans-count {
  font-size: 40px;
}
.fans-bottom {
  padding: 0 10px;
  color: #333;
  border-bottom:solid 1px #ddd;
  height:auto;
  padding-bottom:10px;
  padding-top:10px;
}
.fans-bottom-first{
  border-bottom:solid 2px #ddd;
  font-size:16px;
}
.fans-bottom-title {
  line-height: 30px;
}
.data-unit{
  line-height:24px;
  font-size:14px;
}
</style>
